import {useState,useEffect} from 'react'
import styles from './shouye.module.css'
import { Input,Cell ,Image } from 'react-vant';
import { api } from '../../luyou/index'
import {useNavigate} from 'react-router-dom'
export default function Shouye() {
    let navigate = useNavigate()
    let [value,setValue] = useState('')
    let [list,setList] = useState([])
    let [catelist,setCateList] = useState([])
    let [list2,setList2] = useState([])
    useEffect(()=>{
        getlist()
        getlist2()
        getcate()
    },[])
    let getlist = async ()=>{
        let {data}=await api.get('/getlist',{params:{page:1,pagesize:3}})
        console.log(data);
        if(data.code==200){
            setList(data.data)
        }
    }
    let getlist2 = async ()=>{
        let {data}=await api.get('/getlist2')
        console.log(data);
        if(data.code==200){
            setList2(data.data)
        }
    }
    let getcate= async ()=>{
        let {data}=await api.get('/getcate',{params:{page:1,pagesize:3}})
        console.log(data);
        if(data.code==200){
            setCateList(data.data)
        }
    }
  return (
    <>
        <div className={styles.div}>
             <div>
                <h2 style={{color:'white'}}>速订魔方</h2>    
            </div>
            <div className={styles.box}>
                <svg t="1736343223733" style={{width:'0.5rem',height:'0.5rem'}} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2479" width="200" height="200"><path d="M512 1024c-81.321708 0-154.969169-47.989933-188.864719-121.234697h-182.939326a87.707326 87.707326 0 0 1-72.865079-136.307056l53.915326-80.780944V451.376899A389.844854 389.844854 0 0 1 378.672899 84.175101C403.248899 33.331775 455.288809 0 512 0s108.739596 33.366292 133.315596 84.163596a389.844854 389.844854 0 0 1 257.449707 367.213303v234.288899l53.903821 80.792449a87.69582 87.69582 0 0 1-72.934113 136.341573h-182.939326C666.946157 975.998562 593.310202 1024 512 1024z m0-969.923596c-39.372225 0-73.889079 24.069753-87.960449 61.324944l-4.602248 12.10391-12.288 4.026967a335.964045 335.964045 0 0 0-231.872719 319.856179v250.638383l-63.004764 94.346067a33.642427 33.642427 0 0 0 27.958652 52.258517h220.102472l6.397123 17.983281c21.860674 61.750652 80.286202 103.23991 145.246922 103.23991s123.305708-41.489258 145.235415-103.23991l6.385618-17.983281h220.102472a33.619416 33.619416 0 0 0 27.970158-52.258517l-62.981753-94.346067V451.376899a335.964045 335.964045 0 0 0-231.884225-319.85618l-12.299505-4.026966-4.602248-12.115416c-13.818247-36.67991-49.140494-61.313438-87.902921-61.313438z" fill="#ffffff" p-id="2480"></path><path d="M333.570876 848.780944h363.727102v54.064899H333.570876z" fill="#ffffff" p-id="2481"></path></svg>
                <div className={styles.box2}>
                        <img style={{width:'100%',height:'100%',borderRadius:'50%'}} src="https://i0.hippopx.com/photos/653/876/844/road-forest-season-autumn-thumb.jpg" alt="" />
                </div>
            </div>   
        </div>
        <div className={styles.box3}>
            <h2 style={{color:'white'}}>大家可以随时随地发现精彩活动就在你身边。</h2>
            <Input
                value={value}
                onChange={text => setValue(text)}
                placeholder='请输入文本'
                clearable
                className={styles.input}
            />
        </div>
        <div>
            <div className={styles.box5}>
                <h2>最新活动</h2>
                <span style={{color:"rgb(111, 23, 233)"}}>查看全部</span>
            </div>
            
            <div>
                {
                    list.map(item=>{
                        return(
                            <div key={item._id} className={styles.box6} onClick={()=>navigate('/xiang?id='+item._id)}>
                                <div className={styles.box7}>
                                    <img style={{width:'100%',height:'100%',borderRadius:"0.3rem"}} src={item.img} alt="" />
                                </div>
                                <div>
                                    <h3>{item.name}</h3>
                                    <p>{item.time}</p>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <div>
                <div className={styles.box5}>
                    <h2>类别</h2>
                    <span style={{color:"rgb(111, 23, 233)"}}>查看全部</span>
                </div>
                {
                    catelist.map(item=>{
                        return(
                            <Cell
                                center
                                key={item._id}
                                title={item.name}
                                label=''
                                icon={<Image width={44} height={44} src={item.img} round />}
                                isLink
                            />
                        )
                    })
                }
            </div>
            <div className={styles.box5}>
                    <h2>进行中</h2>
                    <span style={{color:"rgb(111, 23, 233)"}}>查看全部</span>
            </div>
            {
                list2.filter(item=>item.status===true).map(item=>{
                    return(
                        <div key={item._id} className={styles.box6} onClick={()=>navigate('/xiang?id='+item._id)}>
                            <div className={styles.box7}>
                                <img style={{width:'100%',height:'100%',borderRadius:"0.3rem"}} src={item.img} alt="" />
                            </div>
                            <div>
                                <h3>{item.name}</h3>
                                <p>{item.time}</p>
                            </div>
                        </div>
                    )
                })
            }
        </div>
    </>
  )
}
